<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="misapplication-tap-highlight" content="no"/>
    <meta name="HandheldFriendly" content="true"/>
    <meta name="MobileOptimized" content="320"/>
    <title>桩源详情</title>
    <#assign base=request.contextPath  />
    <link rel="stylesheet" type="text/css" href="${base}/Yang/layui/css/layui.css"/>
    <script src="${base}/js/jquery.js"></script>
    <link rel="stylesheet" href="${base}/css/common.css" type="text/css" charset="utf-8"/>
    <link rel="stylesheet" href="${base}/css/mui.min.css"/>
    <script src="${base}/js/mui.min.js"></script>
    <style type="text/css">
        li {
            padding: 0.8em;
            border-bottom: 1px solid #eaeaea;
        }

        li:active {
            background: #f4f4f4;
        }

        .top2 {
            border-top: 2px solid #F2F2F2;
            width: 100%;
            height: 190px;
            text-align: left;
            background-color: #9AC747;
        }

        .top2 p {
            color: white;
            padding: 10px;
            float: none;
        }

        .m-tab {
            position: relative;
            padding: 0.40rem 0 0;
            width: 100%;
            background: #fff;
        }

        .m-tab a {
            position: absolute;
            display: inline-block;
            width: 33%;
            font-size: 0.14rem;
            color: #2C2C2C;
            letter-spacing: 0;
            line-height: 0.38rem;
            text-align: center;
            text-decoration: none;
        }

        .m-tab a:first-child {
            top: 0;
            left: 0;
        }

        .m-tab a.m-coupons {
            top: 0;
            left: 34%;
        }

        .m-tab a.m-couponsqqq {
            top: 0;
            right: 0;
        }

        .m-tab a.active {
            color: #9AC747;
            border-bottom: 2px solid #9AC747;
        }

        .c-tab {
            position: relative;
            padding: 0.40rem 0 0;
            width: 100%;
            background-color: #f7f5f6;
            border-bottom: 3px solid #ECECEC;
            border-top: 3px solid #ECECEC;
        }

        .c-tab span {
            position: absolute;
            display: inline-block;
            width: 33%;
            font-size: 0.14rem;
            color: #2C2C2C;
            letter-spacing: 0;
            line-height: 0.38rem;
            text-align: center;
            text-decoration: none;
        }

        .c-1 {
            top: 0;
            left: 0;
        }

        .c-2 {
            top: 0;
            left: 34%;
        }

        .m-division {
            height: 1px;
            background: #EBEBEB;
        }

        .m-view1 {
            background: #fff;
            height: 200px;
        }

        .m-view2 {
            background: #fff;
            height: 100%;
        }

        .m-view3 {
            background: #fff;
            height: 200px;
        }

        @media screen and (min-width: 360px) {
            html {
                font-size: 100px !important;
            }

            .but {
                padding: 10px;
                border: none;
                height: 100%;
                width: 100%;
                background-color: white;
                font-size: 14px;
                border: 2px solid #F2F2F2;
            }

            img {
                width: 165px;
                height: 100px;
                padding: 5px;
            }

            .foot {
                position: fixed; /*or前面的是absolute就可以用*/
                bottom: 1px;
                background-color: white;
                left: 0px;
                right: 0px;
                width: 100%;
                height: 40px;
                line-height: 40px;

            }

            .foot button {
                width: 26%;
                border-radius: 8px;
            }

            table {
                width: 100%;
                background-color: white;
                margin-bottom: 40px;
            }

            tr {
                border-bottom: 1px solid #ECECEC;
                height: 30px;
            }

            td {
                width: 33%;
            }

            .content {
                text-align: center;
                padding-top: 44px;
            }

            .layui-btn {
                border-radius: 5px;
            }

            .layui-icon-release:before {
                content: "\e609";
                text-shadow: 4px 3px 5px #000;
            }

    </style>
</head>
<script src="${base}/Yang/layui/layui.all.js"></script>
<body onselectstart="return false;" style="background-color: #f2f2f2;">
<header id="header">
<#--<div id="back" class="nvbt layui-icon layui-icon-return" onclick="javascript:window.location.href='${base}/weStationinfo/main.html?ftl=/weStationinfo/main.html'" style="font-size: 20px;"></div>-->
    <div id="back" class="nvbt layui-icon" style="font-size: 20px;"></div>
<#list chargingInfo as chargingInfo1>
    <#if chargingInfo1_index == 0>
    <div class="nvtt" style="font-size: 20px;">${chargingInfo1.stationName}</div>
    </#if>
</#list>
    <div><i class="layui-icon" style="font-size: 20px;"></i></div>
</header>
<div id="content" class="content">
    <div class="top2">
        <#list chargingInfo as chargingInfo>
            <#if chargingInfo_index == 0>
            <p>地址:<span id="">${chargingInfo.address}</span></p>
            <p>开放时间:<span id="">${chargingInfo.busineHours}</span></p>
            </#if>
        </#list>

        <p>
					<span style="float: left;margin-top: 30px;">
                         <b style="width:100px;height: 40px;padding:5px 10px;background: #9AC747;color:white;border-radius: 5px;border: 2px solid white;margin-top: 10px;">对外开放</b>
					</span>

            <a href="#picture"><span style="float: right;margin-right: 20px;text-align: center;">
						<span><i class="layui-icon layui-icon-release"
                                 style="font-size: 50px;color: chartreuse"></i></span>
					<br/><span>距离<span style="color: chartreuse">${distance}</span>米</span>
					</span>
            </a>
        <#--打开地图选择-->
            <div id="picture" class="mui-popover mui-popover-action ">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        <a href="http://uri.amap.com/marker?position=${lat},${lng}&name=充电桩&src=mypage&coordinate=gaode&callnative=0">高德地图</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a onclick="qqMapTransBMap()">百度地图</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="http://apis.map.qq.com/uri/v1/marker?marker=coord:${lng},${lat};">腾讯地图</a>
                    </li>
                </ul>
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        <a href="#picture"><b>取消</b></a>
                    </li>
                </ul>
        </div>
        </p>
    </div>


    <div class="m-tab">
        <a href="javascript:void(0);" id="m-my-invite" class="active">充电桩</a>
        <a href="javascript:void(0);" id="m-my-coupons" class="m-coupons">收费标准</a>
        <a href="javascript:void(0);" id="m-my-couponsqqq" class="m-couponsqqq">实景图</a>
        <div class="m-division"></div>
    </div>
    <div id="m-view1" class="m-view1">
        <div id="plist" style="list-style:none;margin:0;padding:0;text-align:left;">
            <li>家用插座（模式2）:</li>
        </div>
        <div class="layui-row">
<#list chargingInfo as list1>
    <#if list1.connectorType == 1>
            <div class="layui-col-xs12">
                <button class="but">
                    <span style="float: left;height: 60px;line-height: 60px;"><i class="layui-icon layui-icon-chart"
                                                                                 style="font-size: 35px;color: #9AC747;font-weight: bold;"></i></span>
                    <#if list1.status==0>
                        <span id="" style="height: 60px;line-height: 60px;  font-size: 16px;color: #4A6184">离网</span>
                    </#if>
                    <#if list1.status==1>
                        <span id="" style="height: 60px;line-height: 60px;  font-size: 16px;color: #2ac845">空闲</span>
                    </#if>
                    <#if list1.status==2>
                        <span id=""
                              style="height: 60px;line-height: 60px;  font-size: 16px;color: #9AC747;">占用（未充电）</span>
                    </#if>
                    <#if list1.status==3>
                        <span id="" style="height: 60px;line-height: 60px;  font-size: 16px;color: palevioletred;">占用（充电中）</span>
                    </#if>
                    <#if list1.status==4>
                        <span id=""
                              style="height: 60px;line-height: 60px;  font-size: 16px;color: indianred;">占用（预约锁定）</span>
                    </#if>
                    <#if list1.status==255>
                        <span id="" style="height: 60px;line-height: 60px;  font-size: 16px;color: red;">故障</span>
                    </#if>
                    <span id=""
                          style="height: 60px;float: right;margin-right:5px;line-height: 60px;  font-size: 16px;">${list1.connectorName}</span>
                </button>
            </div>

    </#if>

</#list>
        </div>
        <div id="plist" style="list-style:none;margin:0;padding:0;text-align:left;">
            <li>交流接口插座（模式3，连接方式B ）:</li>
        </div>

        <div class="layui-row">
<#list chargingInfo as list2>
    <#if list2.connectorType == 2>
            <div class="layui-col-xs12">
                <button class="but">
                    <span style="float: left;height: 60px;line-height: 60px;"><i class="layui-icon layui-icon-chart"
                                                                                 style="font-size: 35px;color: #9AC747;font-weight: bold;"></i></span>
                    <#if list2.status==0>
                        <span id="" style="height: 60px;line-height: 60px;  font-size: 16px;color: #4A6184">离网</span>
                    </#if>
                    <#if list2.status==1>
                        <span id="" style="height: 60px;line-height: 60px;  font-size: 16px;color: #2ac845">空闲</span>
                    </#if>
                    <#if list2.status==2>
                        <span id=""
                              style="height: 60px;line-height: 60px;  font-size: 16px;color: #9AC747;">占用（未充电）</span>
                    </#if>
                    <#if list2.status==3>
                        <span id="" style="height: 60px;line-height: 60px;  font-size: 16px;color: palevioletred;">占用（充电中）</span>
                    </#if>
                    <#if list2.status==4>
                        <span id=""
                              style="height: 60px;line-height: 60px;  font-size: 16px;color: indianred;">占用（预约锁定）</span>
                    </#if>
                    <#if list2.status==255>
                        <span id="" style="height: 60px;line-height: 60px;  font-size: 16px;color: red;">故障</span>
                    </#if>
                    <span id=""
                          style="height: 60px;float: right;margin-right:5px;line-height: 60px;  font-size: 16px;">${list2.connectorName}</span>
                </button class="but">
            </div>
    </#if>
</#list>

        </div>

        <div id="plist" style="list-style:none;margin:0;padding:0;text-align:left;">
            <li>交流接口插头（带枪线，模式3，连接方式C）:</li>
        </div>

        <div class="layui-row">
<#list chargingInfo as list3>
    <#if list3.connectorType ==3>
            <div class="layui-col-xs12">
                <button class="but">
                    <span style="float: left;height: 60px;line-height: 60px;"><i class="layui-icon layui-icon-chart"
                                                                                 style="font-size: 35px;color: #9AC747;font-weight: bold;"></i></span>
                    <#if list3.status==0>
                        <span id="" style="height: 60px;line-height: 60px;  font-size: 16px;color: #4A6184">离网</span>
                    </#if>
                    <#if list3.status==1>
                        <span id="" style="height: 60px;line-height: 60px;  font-size: 16px;color: #2ac845">空闲</span>
                    </#if>
                    <#if list3.status==2>
                        <span id=""
                              style="height: 60px;line-height: 60px;  font-size: 16px;color: #9AC747;">占用（未充电）</span>
                    </#if>
                    <#if list3.status==3>
                        <span id="" style="height: 60px;line-height: 60px;  font-size: 16px;color: palevioletred;">占用（充电中）</span>
                    </#if>
                    <#if list3.status==4>
                        <span id=""
                              style="height: 60px;line-height: 60px;  font-size: 16px;color: indianred;">占用（预约锁定）</span>
                    </#if>
                    <#if list3.status==255>
                        <span id="" style="height: 60px;line-height: 60px;  font-size: 16px;color: red;">故障</span>
                    </#if>
                    <span id=""
                          style="height: 60px;float: right;margin-right:5px;line-height: 60px;  font-size: 16px;">${list3.connectorName}</span>
                </button class="but">
            </div>
    </#if>
</#list>

        </div>

        <div id="plist" style="list-style:none;margin:0;padding:0;text-align:left;">
            <li>直流接口枪头（带枪线，模式4）:</li>
        </div>

        <div class="layui-row">
<#list chargingInfo as list4>
    <#if list4.connectorType == 4>
            <div class="layui-col-xs12">
                <button class="but">
                    <span style="float: left;height: 60px;line-height: 60px;"><i class="layui-icon layui-icon-chart"
                                                                                 style="font-size: 35px;color: #9AC747;font-weight: bold;"></i></span>
                    <#if list4.status==0>
                        <span id="" style="height: 60px;line-height: 60px;  font-size: 16px;color: #4A6184">离网</span>
                    </#if>
                    <#if list4.status==1>
                        <span id="" style="height: 60px;line-height: 60px;  font-size: 16px;color: #2ac845">空闲</span>
                    </#if>
                    <#if list4.status==2>
                        <span id=""
                              style="height: 60px;line-height: 60px;  font-size: 16px;color: #9AC747;">占用（未充电）</span>
                    </#if>
                    <#if list4.status==3>
                        <span id="" style="height: 60px;line-height: 60px;  font-size: 16px;color: palevioletred;">占用（充电中）</span>
                    </#if>
                    <#if list4.status==4>
                        <span id=""
                              style="height: 60px;line-height: 60px;  font-size: 16px;color: indianred;">占用（预约锁定）</span>
                    </#if>
                    <#if list4.status==255>
                        <span id="" style="height: 60px;line-height: 60px;  font-size: 16px;color: red;">故障</span>
                    </#if>
                    <span id=""
                          style="height: 60px;float: right;margin-right:5px;line-height: 60px;  font-size: 16px;">${list4.connectorName}</span>
                </button class="but">
            </div>
    </#if>
</#list>

        </div>
    </div>
    <div id="m-view2" class="m-view2" style="display: none;">
        <div id="plist" style="list-style:none;margin:0;padding:0;text-align:left;">
            <li>交流</li>
        </div>
        <div class="c-tab">
            <span class="c-1"> </span>
            <span class="c-2">充电费</span>
            <span class="c-2"> </span>
        </div>
        <table align="right">
<#list fees as fee>
    <tr>
        <td>${fee}元</td>
    </tr>
</#list>

        </table>
        <div class="foot">
        <#--<button class="layui-btn layui-btn-sm" style="background-color: #9AC747"><i class="layui-icon">&#xe609;</i>导航</button>-->
            <button class="layui-btn layui-btn-sm" style="background-color: #9AC747" type="button" onclick="MyLike()"><i
                    class="layui-icon">&#xe67b;</i> 收藏
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-disabled"><i class="layui-icon">&#xe60e;</i> 排队</button>
        </div>
    </div>
    <div id="m-view3" class="m-view3" style="display: none;background-color: #F2F2F2;height: 100%;">
        <div class="site-demo-flow">
            <#list image as images>

                <img src="${images.picture}"/>
            </#list>
        </div>
        <div class="foot">
        <#--<button class="layui-btn layui-btn-sm " style="background-color: #9AC747"><i class="layui-icon">&#xe609;</i>导航</button>-->
            <button class="layui-btn layui-btn-sm " style="background-color: #9AC747" onclick="MyLike()"><i
                    class="layui-icon">&#xe67b;</i> 收藏
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-disabled"><i class="layui-icon">&#xe60e;</i> 排队</button>
        </div>
    </div>
</div>
<script type="text/javascript">
    $('#m-return').on('click', function () {
        window.history.back()
    });
    var myCoupons = $('#m-my-coupons');
    var myCouponsqqq = $('#m-my-couponsqqq');
    var myInvite = $('#m-my-invite');
    var view1 = $('#m-view1');
    var view2 = $('#m-view2');
    var view3 = $('#m-view3');
    $('#m-return').on('click', function () {
        window.history.back()
    });
    myInvite.on('click', function () {
        myInvite.addClass('active');
        myCoupons.removeClass('active');
        myCouponsqqq.removeClass('active');
        view1.show();
        view2.hide();
        view3.hide();
    });
    myCoupons.on('click', function () {
        myInvite.removeClass('active');
        myCoupons.addClass('active');
        myCouponsqqq.removeClass('active');
        view1.hide();
        view2.show();
        view3.hide();
    });
    myCouponsqqq.on('click', function () {
        myInvite.removeClass('active');
        myCoupons.removeClass('active');
        myCouponsqqq.addClass('active');
        view1.hide();
        view3.show();
        view2.hide();
    });


    function MyLike() {
        $.ajaxSetup({
            //设置ajax请求结束后的执行动作
            complete: function (XMLHttpRequest, textStatus) {
                // 通过XMLHttpRequest取得响应头，REDIRECT
                var redirect = XMLHttpRequest.getResponseHeader("REDIRECT");//若HEADER中含有REDIRECT说明后端想重定向
                if (redirect == "REDIRECT") {
                    var win = window;
                    while (win != win.top) {
                        win = win.top;
                    }
                    //将后端重定向的地址取出来,使用win.location.href去实现重定向的要求
                    win.location.href = XMLHttpRequest.getResponseHeader("CONTEXTPATH");
                }
            }
        });
        var chargeId = "${chargeID}";
        $.ajax({
            type: "POST",
            url: "${base}/weCollection/insertMyLike",
            data: {chargeId: chargeId},
            async: false,
            success: function (data) {
                layer.msg(data);

            }
        });
    }


    function qqMapTransBMap() {
        var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
        var x = ${lng};
        var y = ${lat};
        var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
        var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
        var lngs = z * Math.cos(theta) + 0.0065;
        var lats = z * Math.sin(theta) + 0.006;
       window.location.href="http://api.map.baidu.com/marker?location="+lngs+","+lats+"&title=充电桩&output=html";

    }


</script>

</body>

</html>